<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="visible" width="800px" v-if="visible" append-to-body
      :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth" :disabled="disabled" v-loading="loading">
        <el-form-item label="规则标题" prop="titles">
          <el-input v-model="form.titles" placeholder="请输入内容" :style="{width: inputWidth}" />
        </el-form-item>
        <el-form-item label="规则内容" prop="contents">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.contents"
            placeholder="请输入内容" :style="{width: inputWidth}" />
        </el-form-item>
        <el-form-item label="规则图标" prop="imgs" ref="imgRef">
          <ImageUploadMore :limit="1" :fileSize="20" @successImg="getCradImg" :value="form.imgs">
          </ImageUploadMore>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="!disabled">提交保存</el-button>
        <el-button @click="cancel" v-if="!disabled">取 消</el-button>
        <el-button @click="cancel" v-if="disabled">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getToken
  } from "@/utils/auth";
  import {
    getEquityCardIssue,
    addEquityCardIssue,
    updateEquityCardIssue,
    cardSelectLs,
  } from "@/api/equityManager/equityCardIssue";

  export default {
    // dicts: ['asset_card_type'],
    name: "Dialog",
    data() {
      return {
        labelWidth: '130px',
        inputWidth: '300px',
        loading: false,
        id: '', //
        // 是否禁用表单
        disabled: false,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        visible: false,
        list:[],
        addLoading: false,
        ruleIndex: '',
        // 表单参数
        form: {
          contents:'',//内容
          imgs:'',//规则图标
          titles:'',//标题
        },
        // 表单校验
        rules: {
          contents: [{
            required: true,
            message: "请输入内容",
            trigger: ["blur", "change"]
          }],
          imgs: [{
            required: true,
            message: "请上传图片",
            trigger: ["blur", "change"]
          }],
          titles: [{
            required: true,
            message: "请输入标题",
            trigger: ["blur", "change"]
          }],
        },
      };
    },
    created() {

    },
    methods: {
      /** 打开发行管理弹框 */
      open(index, ls) {
        console.log(index)
        console.log(ls)
        this.ruleIndex = index
        this.list = ls
        this.visible = true
        if(index==null){
          this.reset();
        }else{
          this.loading = true
          this.form.titles = this.list[index].title
          this.form.contents = this.list[index].content
          this.form.imgs = this.list[index].img
          this.loading = false
        }
        console.log(this.form)
        if (index) {
          this.title = "编辑其他规则"
        } else {
          this.title = "新增其他规则"
        }
      },
      // 取消按钮
      cancel() {
        this.visible = false;
        this.reset();
      },
      // 表单重置
      reset() {
        // 子表选中数据
        this.form = {
          contents:'',//内容
          imgs:'',//规则图标
          titles:'',//标题
        }
      },
      /** 规则图标 */
      getCradImg(e) {
        console.log(e)
        this.form.imgs = e
        this.$refs['imgRef'].clearValidate();
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            console.log('this.ruleIndex',this.ruleIndex)
            this.$emit('refresh',this.form,this.ruleIndex)
            this.visible = false
          }
        });
      },
    }
  };

</script>
<style scoped>
  .main {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
  }

  .tab {
    display: flex;
    align-items: center;
    height: 40px;
  }

  .tab_box {
    font-size: 14px;
    height: 100%;
    width: 100px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #dfe6ec;
    border-radius: 4px 0 0 4px;
    color: #333;
  }

  .tab_box:hover {
    opacity: 0.8;
  }

  .tab_box_active {
    background-color: #ff9300;
    border: 1px solid #ff9300;
    color: #fff;
  }

  .tab_box:nth-child(2) {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .tab_box:nth-child(3) {
    border-radius: 0 4px 4px 0;
  }

  .main_info {
    margin-top: 40px;
  }

  .stock_txt {
    font-size: 13px;
    color: #333333;
    padding-left: 100px;
    margin-bottom: 20px;
  }

  .dflex {
    display: flex;
    align-items: center;
  }

  .el_table_box {
    padding: 40px 20px 40px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }

  .el_table_box_h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f3f3f3;
    margin-bottom: 14px;
  }

  .el_table_box_h_title {
    border-left: 4px solid #ff9300;
    padding-left: 4px;
  }

  .commodity_album {
    padding-top: 20px;
  }

  .carousel_box {
    padding-top: 60px;
    width: 400px;
  }

  .carousel_box_title {
    font-size: 15px;
    color: #ff9300;
    margin-bottom: 20px;
  }

  .swiper_img {
    width: 100%;
    height: 100%;
  }

  .phone_box {
    border: 10px solid #f3f3f3;
    border-radius: 8px;
    line-height: 0;
  }

  .button_box {
    padding-top: 30px;
    padding-left: 100px;
  }

  .explain_txt {
    font-size: 20px;
    margin-left: 20px;
    color: #ff9300;
  }

  .el_table_box_d {
    border: 1px solid #dfe6ec;
    width: 100%;
  }

  .el_table_box_d_t {
    display: flex;
    align-items: center;
    color: #909399;
    font-size: 14px;
    font-weight: bold;
  }

  .tab_index {
    width: 64px;
    padding: 10px;
    border-right: 1px solid #dfe6ec;
    height: 56px;
    display: flex;
    align-items: center;
  }

  .tab_name {
    height: 40px;
    display: flex;
    align-items: center;
    flex: 1;
    padding: 10px;
    border-right: 1px solid #dfe6ec;
  }

  .tab_num {
    height: 40px;
    display: flex;
    align-items: center;
    width: 35%;
    padding: 10px;
    border-right: 1px solid #dfe6ec;
  }

  .tab_operation {
    width: 160px;
    padding: 10px;
    height: 40px;
    display: flex;
    align-items: center;
  }

  .tab_index_d {
    width: 64px;
    padding: 10px;
    border-right: 1px solid #dfe6ec;
    height: 76px;
    display: flex;
    align-items: center;
  }

  .tab_name_d {
    height: 76px;
    display: flex;
    align-items: center;
    flex: 1;
    padding: 10px;
    border-right: 1px solid #dfe6ec;
  }

  .tab_num_d {
    height: 76px;
    display: flex;
    align-items: center;
    width: 35%;
    padding: 10px;
    border-right: 1px solid #dfe6ec;
  }

  .tab_operation_d {
    width: 160px;
    padding: 10px;
    height: 76px;
    display: flex;
    align-items: center;
  }

  .el_table_box_d_b {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 15px;
    border-top: 1px solid #dfe6ec;
  }

  .detail_button {
    color: #ff4949;
    font-size: 14px;
    cursor: pointer;
  }

  .tab_none {
    color: #909399;
    font-size: 15px;
    border-top: 1px solid #dfe6ec;
    width: 100%;
    text-align: center;
    padding: 20px 0;
  }

  .disx {
    display: flex;
    align-items: center;
  }

</style>
